<template>
  <div class="device-box">
    <el-form v-loading="loading" style="border: 1px solid #dcdcdc;border-radius: 2px;"
             :disabled="formData.deviceStatus === '2'">
      <template v-for="(item, index) in formList">
        <el-form-item
          :key="`${item.prop}${index}`"
          :style="item.itemStyle || {}"
          :label="item.name"
          class="form-label"
        >
          {{ formData[item.prop] }}
        </el-form-item>
      </template>
      <el-form-item v-for="item in modelList"
                    :key="item.id"
                    :label="item.modelName"
                    class="form-label">
        <!--  整数(动态数据)      -->
        <el-slider style="width: 80%;margin-left: 20px" v-model="item.newValue"
                   v-if="item.fieldType === '1' && item.dataType === '1'"
                   :step="Number(item.dataExtMap.step)"
                   :min="item.dataExtMap.minValue"
                   :max="item.dataExtMap.maxValue"></el-slider>
        <!--  整数(静态数据)      -->
        <div v-else-if="item.fieldType === '1' && item.dataType === '2'">
          <el-slider style="width: 80%;margin-left: 20px" v-model="item.newValue"
                     :disabled="true"></el-slider>
          <div style="color: red;font-size: 10px;">注:不可操作</div>
        </div>
        <!--  小数(动态数据)      -->
        <el-slider style="width: 80%;margin-left: 20px" v-model="item.newValue"
                   v-if="item.fieldType === '2' && item.dataType === '1'"
                   :step="Number(item.dataExtMap.step)"
                   :min="item.dataExtMap.minValue"
                   :max="item.dataExtMap.maxValue"></el-slider>
        <!--  小数(静态数据)      -->
        <div v-else-if="item.fieldType === '2' && item.dataType === '2'">
          <el-slider style="width: 80%;margin-left: 20px" v-model="item.newValue"
                     :disabled="true"></el-slider>
          <div style="color: red;font-size: 10px;">注:不可操作</div>
        </div>
        <!--  布尔      -->
        <el-switch v-else-if="item.fieldType === '3'"
                   v-model="item.newValue" :active-value="item.dataExtMap.trueValue" :active-text="item.dataExtMap.trueValue"
                   :inactive-value="item.dataExtMap.falseValue" :inactive-text="item.dataExtMap.falseValue"
                   active-color="#13ce66">
        </el-switch>
        <!--  枚举      -->
        <div v-else-if="item.fieldType === '4'">
          <el-tag style="margin-right: 20px;cursor: pointer"
                  v-for="enumItem in item.dataExtMap.enumList"
                  :key="enumItem.value"
                  :type="enumItem.type"
                  @click="() => item.newValue = enumItem.value"
                  size="medium"
                  effect="light">
            {{ enumItem.label }}
          </el-tag>
        </div>
        <!--  字符串      -->
        <el-input v-else-if="item.fieldType === '5'" v-model="item.newValue" placeholder="请输入字符串"
                  style="width: 70%" />
        <!--  数组      -->
        <div v-else-if="item.fieldType === '6'">
          <div v-for="(arrayItem ,index) in arrayRange(item.dataExtMap.arrayLength)" :key="index"
               style="margin-bottom: 10px">
            <span v-if="item.dataExtMap.arrayDataType === '1'">整数:
            <el-slider v-model="item['newValue'+ index]" style="width: 80%;margin-left: 20px"></el-slider>
            </span>
            <span v-else-if="item.dataExtMap.arrayDataType === '2'">小数:
             <el-slider v-model="item['newValue'+ index]" style="width: 80%;margin-left: 20px"></el-slider>
            </span>
            <span v-else-if="item.dataExtMap.arrayDataType === '5'">字符串:
             <el-input v-model="item['newValue'+ index]" placeholder="请输入字符串" style="width: 70%" />
            </span>
            <span v-else-if="item.dataExtMap.arrayDataType === '7'">对象</span>
          </div>
        </div>
        <!--  对象      -->
        <div v-else-if="item.fieldType === '7'">
        </div>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { dictMixin } from '@/mixin/dict'
import api from '@/api/apis/sceneRoom'
import { parseSceneData } from '@/utils/scene-data'

export default {
  name: 'DeviceRunningState',
  mixins: [dictMixin],
  props: {
    // 请求参数
    requestParams: {
      type: Object,
      default: () => ({})
    },
    // 弹窗数据
    popData: {
      type: Object,
      default: () => ({})
    },
    // 弹窗配置
    popConfig: {
      type: Object,
      default: () => ({})
    },
    // 弹窗取消
    close: {
      type: Boolean,
      default: false
    },
    // 弹窗确认
    confirm: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    async submit() {
      const runningParams = []
      this.modelList.forEach(item => {
        // 找每条的newValue, 如果是数组的,找newValue0, newValue1 ...
        const newValues = Object.keys(item).filter(item => item === 'newValue' || item.startsWith('newValue'))
        if (newValues.length > 0) {
          let value = []
          newValues.forEach(key => value.push(item[key]))
          runningParams.push({
            physicalModelId: item.id,
            runningValue: value.join(',')
          })
        }
      })
      const obj = {
        deviceId: this.formData.id,
        runningParams: runningParams
      }
      this.loading = true
      await this.$api.device.saveRunningParameter(obj)
      this.loading = false
      this.$message.success(`操作成功！`)
      this.$emit('onFinish', 'runningParam-save')
    },
    arrayRange(maxValue) {
      const res = []
      for (let i = 0; i < maxValue; i++) {
        res.push({
          index: i
        })
      }
      return res
    }
  },
  data() {
    return {
      loading: false,
      formData: {},
      modelList: [],
      formList: [
        {
          name: '设备状态',
          prop: 'deviceStatusName'
        }
      ]
    }
  },
  watch: {
    popData: {
      handler(data) {
        this.$api.device.modelList(data.id).then(res => {
          this.formData = data
          this.modelList = res.data
        })
      },
      deep: true,
      immediate: true
    },
    confirm() {
      this.submit()
    }
  }
}
</script>
<style lang="scss">

.form-label {
  border-bottom: 1px solid #dcdcdc;
  display: flex;
  margin: 0;

  .el-form-item__label {
    text-align: center;
    background-color: rgb(219,139,57);
    color: #ffffff;
    padding: 10px;
    width: 200px;
  }

  .el-form-item__content {
    margin: 10px 0 10px 10px;
    width: 100%;
  }
}

</style>
